<template>

  <el-drawer :title="dialogTitle" v-model="dialogVisible"  size="70%">
    <!-- 列表 -->
    <ContentWrap>
      <el-table
        show-summary
        :summary-method="summaryColumn"
        v-loading="loading"
        border
        :show-overflow-tooltip="true"
        :data="list"
        :row-class-name="tableRowClassName" style="width: 100%;">
        <el-table-column label="平台订单号" align="center" prop="orderNumber" width="180" />
        <el-table-column label="项目名称" align="center" prop="projectName" />
        <el-table-column label="金额" align="center" prop="totalPrice" width="80" />
        <el-table-column label="单价" align="center" prop="price" width="80" />
        <el-table-column label="数量" align="center" prop="entriesNum" width="65"/>
        <el-table-column label="单位" align="center" prop="unit" width="80" />
        <el-table-column label="规格" align="center" prop="specification" width="120" />
      </el-table>
    </ContentWrap>

    <template #footer>
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </template>
  </el-drawer>


</template>
<script lang="ts" setup>
import * as StaticsApi from '@/api/hosp/statics'
import { priceMultiply } from '@/utils'

defineOptions({ name: 'RegisterOrder' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗


const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用

const loading = ref(false) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  searchTime: [],
  patientId: null,
  patientName: null,
  status: null,
  orderNo: null,
  registerNo: null,
  clinicNo: null,
})
const queryFormRef = ref() // 搜索的表单

const tableRowClassName = ({row}) => {
  if (row.procedureStatus === 'success') {
    return 'my-table success-row'
  } else if (row.procedureStatus === 'fails') {
    return 'my-table fails-row'
  } else if (row.procedureStatus === 'refund') {
    return 'my-table refund-row'
  }
  return 'my-table'
}

const summaryColumn = (param) => {
  const { columns, data } = param
  const sums = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计';
      return;
    }
    const values = data.map(item => Number(item[column.property]));
    if (column.property == 'totalPrice') {
      sums[index] = values.reduce((prev, curr) => {
        const value = Number(curr);
        if (!isNaN(value)) {
          return prev + curr;
        } else {
          return prev;
        }
      }, 0);
      sums[index];
    }
  });
  return sums
}

/** 查询列表 */
const getList = async (orderNumber: string) => {
  loading.value = true
  list.value = []
  try {
    queryParams.orderNo = orderNumber;
    const data = await StaticsApi.getPriceList(queryParams)
    list.value = data
    list.value.forEach(item => {
      var p = priceMultiply(item.price,item.entriesNum)
      item.totalPrice = p;
    })
  } finally {
    loading.value = false
  }
}

/** 打开弹窗 */
const open = async (orderNumber: string) => {
  dialogVisible.value = true
  await getList(orderNumber);
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗



</script>
<style scoped>
:deep(.el-table) {
  position: relative;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  max-width: 100%;
  font-size: 12px;
  color: #000000;
}
:deep(.refund-row) {
  background-color: #F3D39BFF !important;
}

:deep(.fails-row) {
  background-color: #D15B47 !important;
}

:deep(.success-row) {
  background-color: #36bc99 !important;
}
:deep(.my-table td) {
  padding: 5px 0 !important;
}

</style>
